﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="~/Areas/Back/lib/layui/css/layui.css">
    <script src="~/Areas/Back/lib/layui/layui.js" charset="utf-8"></script>
    <style>
        .layui-table-cell {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <form class="layui-form" onsubmit="return false" style="margin-top: 50px;">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" id="name" class="layui-input" />
            </div>         
            <label class="layui-form-label">是否显示在首页</label>
            <div class="layui-input-inline">
                <select id="ZuZhuang2">
                    <option value="" selected>全部</option>   
                    <option value="是">是</option>           
                    <option value="否">否</option>                
                </select>
            </div>                
            <button id="search" data-type="reload" class="layui-btn">搜索</button>
        </div>
    </form>
    <table id="my_table" lay-filter="mjf"></table>
    <script type="text/html" id="top_tool">
        <button class="layui-btn" lay-event="create">新建商品</button>
    </script>
    <!--行内工具-->
    <script type="text/html" id="inline_tool">
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-edit" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-delete layui-btn-danger" lay-event="del">删除</button>
    </script>
</body>
<script src="~/Areas/Back/js/Date.js"></script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        table.render({
            elem: "#my_table",
            url: "getProduct",
            method: "post",
            toolbar: "#top_tool",
            page: true, 
            height:"650",
            cols: [[{
                type: 'checkbox'
            }, {
                field: 'Id',
                title: 'ID',
                width: 80
            }, {
                field: 'Name',
                title: '商品名字',
                width: 120
            }, {          
                field: 'ImgUrl',
                title: '图片地址',
                width:240
            }, {
                field: 'ImgUrl',
                title: '图片',
                width: 200,
                templet: '<div><img src="/{{d.ImgUrl}}"/></div>'
            }, {
                field: 'ProductPrice',
                title: '产品售价',
                width: 140
            }, {
                field: 'MarketPrice',
                title: '市场售价',
                width: 140
            }, {
                field: 'XingHao',
                title: '型号',
                width: 130
            }, {
                field: 'CaiZhi',
                title: '材质',
                width: 145
            }, {          
                field: 'TypeName',
                title: '分类',
                width: 135
            }, {
                field: 'HomeFlag',
                title: '是否显示在首页',
                width: 130
            }, {       
                fixed: 'right',
                title: '操作',
                toolbar: "#inline_tool",              
            }]]
        });
        var active = {
            reload: function () {
                table.reload('my_table', {
                    where: {
                        name: $("#name").val(),
                        isPub: $("#ZuZhuang2").val()
                    }
                })
            }
        };
        $("#search").click(function () {
            var type = $(this).data('type'); 
            active[type] ? active[type].call(this) : '';
        });
        table.on('toolbar(mjf)', function (obj) {
            if (obj.event == "create") {
                layer.open({
                    type: 2,
                    area: ['800px', '800px'],
                    content: '/Back/Product/Add' 
                });
            }
        });
        table.on('tool(mjf)', function (obj) {
            console.log(obj);
            var data = obj.data;
            if (obj.event == "edit") {
                layer.open({
                    type: 2,
                    area: ['800px', '800px'],
                    content: "Edit?Id=" + data.Id
                });
            } else if (obj.event == "del") {
                layer.confirm("真的删除吗？", function (index) {
                    $.ajax({
                        url: "DelArt",
                        type: "post",
                        dataType: "json",
                        data: {
                            Id: data.Id
                        },
                        success: function (res) {

                            if (res.success == true) {

                                layer.close(index);

                                location.reload();
                            } else {
                                layer.msg(res.msg);
                            }
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    })

                });
            }
        });
    });
</script>
</html>

